<template>
  <div class="wrapper">
    <main>
      <ul>
        <li style="color: rgba(255, 255, 255, 0.7); margin: 15px">操作栏</li>
        <li v-for="item in content" :key="item.title" class="content">
          <template
            v-if="
              item.type === 'input' &&
              content.filter((v) => v.title === '数据源')[0].value === 'random'
            "
          >
            <span>{{ item.title }}</span>
            <el-input-number
              v-if="item.title === '节点数量'"
              v-model="item.value"
              style="width: 150px"
              :min="100"
              :max="100000"
              controls-position="right"
              size="small"
            />
            <span v-else>{{
              content.filter((v) => v.title === "节点数量")[0].value * 10
            }}</span>
          </template>
          <template v-if="item.type !== 'input'">
            {{ item.title }}
            <el-select
              v-if="item.type === 'select'"
              v-model="item.value"
              class="m-2"
              style="width: 150px"
              placeholder="Select"
              size="small"
            >
              <el-option
                v-for="item in item.option"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-switch
              v-if="item.type === 'switch'"
              v-model="item.value"
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
            />
            <el-slider
              v-if="item.type === 'slider'"
              v-model="item.value"
              style="width: 130px"
              :max="item.range[1]"
              :min="item.range[0]"
              :step="item.step || 1"
            />
            <el-radio-group
              v-if="item.type === 'radio'"
              v-model="item.value"
              class="ml-4"
            >
              <el-radio
                v-for="radioItem in item.option"
                :label="radioItem"
                :key="radioItem"
                style="margin-right: 10px"
                >{{ radioItem }}</el-radio
              >
            </el-radio-group>
          </template>
        </li>
        <li style="height: 50vh" v-if="content.length < 8"></li>
      </ul>
    </main>
    <button class="btn" @click="fold">
      <svg
        v-show="isFold"
        t="1665471166502"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2548"
        width="25"
        height="25"
      >
        <path
          d="M678.685323 121.034611 105.816001 121.034611c-13.995759 0-25.282826 11.343349-25.282826 25.282826l0 75.792197c0 13.995759 11.287067 25.282826 25.282826 25.282826l572.870346 0c13.939477 0 25.282826-11.287067 25.282826-25.282826l0-75.792197C703.96815 132.37796 692.6248 121.034611 678.685323 121.034611"
          p-id="2549"
          fill="#ffffff"
        ></path>
        <path
          d="M105.798605 559.12632l497.078149 0c13.939477 0 25.282826-11.343349 25.282826-25.282826l0-75.792197c0-13.995759-11.343349-25.282826-25.282826-25.282826L105.798605 432.768471c-13.939477 0-25.282826 11.287067-25.282826 25.282826l0 75.792197C80.515778 547.782971 91.859128 559.12632 105.798605 559.12632"
          p-id="2550"
          fill="#ffffff"
        ></path>
        <path
          d="M678.685323 744.469586 105.816001 744.469586c-13.995759 0-25.282826 11.343349-25.282826 25.282826l0 75.792197c0 13.995759 11.287067 25.282826 25.282826 25.282826l572.870346 0c13.939477 0 25.282826-11.287067 25.282826-25.282826l0-75.792197C703.96815 755.812935 692.6248 744.469586 678.685323 744.469586"
          p-id="2551"
          fill="#ffffff"
        ></path>
        <path
          d="M939.871951 317.477678l-210.219839 162.306596c-11.5695 8.747221-10.835789 24.492834 0 33.861202l210.219839 162.306596c11.682064 9.42465 33.861202 4.119831 33.861202-23.985274L973.733153 341.40667C973.733153 307.376623 951.554014 307.432904 939.871951 317.477678"
          p-id="2552"
          fill="#ffffff"
        ></path>
      </svg>
      <svg
        v-show="!isFold"
        t="1665472150429"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2139"
        width="25"
        height="25"
      >
        <path
          d="M664.608723 120.804367 93.448322 120.804367c-13.671371 0-24.840758 10.900258-25.206078 24.537859l0 76.92909c0.364297 13.637602 11.533684 24.537859 25.206078 24.537859l571.160401 0c13.900591 0 25.222451-11.266601 25.222451-25.223474l0-75.556836C689.832198 132.070968 678.509315 120.804367 664.608723 120.804367z"
          p-id="2140"
          fill="#ffffff"
        ></path>
        <path
          d="M93.442182 557.577035l495.547283 0c13.956873 0 25.223474-11.266601 25.223474-25.223474l0-75.556836c0-13.956873-11.266601-25.223474-25.223474-25.223474L93.442182 431.573249c-13.589506 0-24.709775 10.770298-25.199938 24.293289l0 77.415161C68.733431 546.805714 79.851653 557.577035 93.442182 557.577035z"
          p-id="2141"
          fill="#ffffff"
        ></path>
        <path
          d="M664.608723 742.371808 93.448322 742.371808c-13.671371 0-24.840758 10.900258-25.206078 24.537859l0 76.92909c0.364297 13.637602 11.533684 24.537859 25.206078 24.537859l571.160401 0c13.900591 0 25.222451-11.266601 25.222451-25.223474l0-75.556836C689.832198 753.638409 678.509315 742.371808 664.608723 742.371808z"
          p-id="2142"
          fill="#ffffff"
        ></path>
        <path
          d="M952.532295 480.136292 742.957139 318.316789c-11.658528-9.416464-33.742499-4.092201-33.742499 23.877827l0 309.62585c0 33.966603 22.083971 33.911344 33.742499 23.877827l209.575156-161.819502C964.134541 505.135662 963.349665 489.497497 952.532295 480.136292z"
          p-id="2143"
          fill="#ffffff"
        ></path>
      </svg>
    </button>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

defineProps({
  content: Array,
});

const isFold = ref(true); // 是否折叠
const fold = () => {
  const wrapper = document.querySelector(".wrapper");
  wrapper.style.maxWidth = isFold.value ? "50px" : "250px";
  wrapper.children[0].style.visibility = isFold.value ? "hidden" : "visible";
  isFold.value = !isFold.value;
};
</script>

<style scoped>
.wrapper {
  max-width: 250px;
  background-color: #2a2a2ecc;
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  position: fixed;
  text-align: left;
  top: 0;
  transition: max-width 0.3s ease;
  width: 100%;
  z-index: 999;
}

main {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

ul {
  list-style: none;
  color: white;
  display: flex;
  flex-direction: column;
  font-size: large;
  padding: 0;
  width: 100%;
  margin: 10px;
}

.content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  align-items: center;
  border: none;
  cursor: pointer;
  display: flex;
  height: 65px;
  justify-content: center;
  text-align: center;
  width: 100%;
  background-color: #1e1e21;
}
</style>
